<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>
       <canvas id="cvs" width="400" height="400"></canvas>
    </div>
    <script>
        /*非零环绕原则：判断哪些区域属于路径内
        1）计算结果非0，则在路径内
        2）在路径包围区域中，找一点向外发射一条射线，和所有环绕它的边相交
        3）开启一个计数器，从0开始，这个射线遇到顺时针的路径+1，逆时针的减一
        4）给非0的区域填充颜色
        */
       var canvas = document.getElementById('cvs');
       var context = canvas.getContext("2d");
       function rectangle(startX, startY, width, height, lineWidth, strokeStyle) {
         context.beginPath()
         context.moveTo(startX, startY);
         context.lineTo(startX+width, startY);
         context.lineTo(startX+width, startY+height);
         context.lineTo(startX, startY+height);
         context.strokeStyle = strokeStyle;
         context.lineWidth = lineWidth;
         context.closePath();
         context.stroke();
       }
       rectangle(100,100,200,200,4,'red','green')
       //画一个逆时针的正方形
        // context.beginPath()  这句不要，是一起画的
         context.moveTo(200, 200);
         context.lineTo(200, 150);
         context.lineTo(150, 150);
         context.lineTo(150, 200);
         context.closePath();
         //一起填充
         context.fillStyle="skyblue"
         context.fill()
    </script>
</body>
</html>